<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" xmlns:pe="http://primefaces.org/ui/extensions"
	xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:fn="http://java.sun.com/jsp/jstl/functions"
	template="WEB-INF/templates/ui.xhtml">

	<ui:define name="metadata">
		<!-- <f:viewParam name="language" value="#{localeCtrl.language}" /> -->
		<!-- <f:viewAction action="#{cardSearchCtrl.initialize}" /> -->
	</ui:define>

	<ui:define name="content">

		<h:form id="searchForm">
			<h:panelGroup id="searchBox" layout="block">

				<p:inputText id="searchInput" value="#{cardSearchCtrl.queryText}" widgetVar="queryTextWidget"
					style="width: 250px; margin-right: 5px;" />
				<!-- <p:commandButton action="#{cardSearchCtrl.search}" value="#{msgs.searchAndHide}" process="@form"
					update=":searchResults" styleClass="ui-priority-primary"
					oncomplete="searchBoxWidget.collapse();" style="margin-right: 5px;" /> -->
				<p:commandButton action="#{cardSearchCtrl.search}" value="#{msgs.search}" process="@form"
					update=":searchResults" style="margin-right: 5px;" styleClass="ui-priority-primary" />
				<p:commandButton action="#{cardSearchCtrl.reset}" value="Reset" process="@form"
					update="searchBox" />

				<h:panelGrid columns="2" styleClass="text-std">
					<h:outputText value="#{msgs.searchIn}: " />
					<p:selectManyCheckbox value="#{cardSearchCtrl.selectedSearchTargets}" styleClass="text-std">
						<f:selectItems value="#{cardSearchCtrl.searchTargetItems}" />
					</p:selectManyCheckbox>
				</h:panelGrid>

				<div class="line-container">
					<fieldset class="ui-widget-content ui-corner-all line-item">
						<legend>
							<p:selectBooleanCheckbox value="#{cardSearchCtrl.allSpheres}"
								onchange="toggle($(this), sphereSMC);" />
							#{msgs.sphere}
						</legend>
						<p:selectManyCheckbox value="#{cardSearchCtrl.selectedSpheres}" layout="grid" columns="1"
							styleClass="text-std" widgetVar="sphereSMC">
							<f:selectItems value="#{cardSearchCtrl.sphereItems}" />
						</p:selectManyCheckbox>
					</fieldset>

					<fieldset class="ui-widget-content ui-corner-all line-item">
						<legend>
							<p:selectBooleanCheckbox value="#{cardSearchCtrl.allPlayerCardTypes}"
								onchange="toggle($(this), playerSMC);" />
							#{msgs.playerDeck}
						</legend>
						<p:selectManyCheckbox value="#{cardSearchCtrl.selectedPlayerCardTypes}" layout="grid"
							columns="1" styleClass="text-std" widgetVar="playerSMC">
							<f:selectItems value="#{cardSearchCtrl.playerCardTypeItems}" />
						</p:selectManyCheckbox>
					</fieldset>

					<h:panelGroup id="encounterCardsFilter" styleClass="line-item" layout="block">
						<fieldset class="ui-widget-content ui-corner-all">
							<legend>
								<p:selectBooleanCheckbox value="#{cardSearchCtrl.allEncounterCardTypes}"
									onchange="toggle($(this), encounterSMC);" />
								#{msgs.encounterDeck}
							</legend>
							<p:selectOneButton />
							<p:selectManyCheckbox value="#{cardSearchCtrl.selectedEncounterCardTypes}" layout="grid"
								columns="1" styleClass="text-std" widgetVar="encounterSMC">
								<f:selectItems value="#{cardSearchCtrl.encounterCardTypeItems}" />
							</p:selectManyCheckbox>
						</fieldset>

						<fieldset class="ui-widget-content ui-corner-all" style="margin-top: 5px;">
							<legend>
								<p:selectBooleanCheckbox value="#{cardSearchCtrl.allOtherCardTypes}"
									onchange="toggle($(this), otherSMC);" />
								#{msgs.other}
							</legend>
							<p:selectManyCheckbox value="#{cardSearchCtrl.selectedOtherCardTypes}" layout="grid"
								columns="1" styleClass="text-std" widgetVar="otherSMC">
								<f:selectItems value="#{cardSearchCtrl.otherCardTypeItems}" />
							</p:selectManyCheckbox>
						</fieldset>
					</h:panelGroup>

					<div class="line-item-last">
						<h:outputText value="#{msgs.set}" style="font-weight: bold;" />
						<p:autoComplete id="cardSetAutoComplete" value="#{cardSearchCtrl.selectedCardSets}"
							completeMethod="#{cardSearchCtrl.completeCardSet}" var="item" itemLabel="#{item.name}"
							itemValue="#{item}" converter="#{autoCompleteItemConverter}" maxResults="20" multiple="true"
							forceSelection="true" style="margin-bottom: 5px;" widgetVar="cardSetAutoCompleteWidget">

							<p:column style="border: none;">
								<h:outputText value="#{item.name}" escape="false" />
								<br />
								<h:outputText rendered="#{not empty item.cycleName}"
									value="#{msgs.cycle}: #{item.cycleName}" styleClass="text-small" escape="false" />
							</p:column>
						</p:autoComplete>

						<h:outputText value="#{msgs.encounterSet}" style="font-weight: bold;" />
						<p:autoComplete id="encounterSetAutoComplete" value="#{cardSearchCtrl.selectedEncounterSets}"
							completeMethod="#{cardSearchCtrl.completeEncounterSet}" var="item" itemLabel="#{item.name}"
							itemValue="#{item}" converter="#{autoCompleteItemConverter}" maxResults="10" multiple="true"
							forceSelection="true" style="margin-bottom: 5px;" widgetVar="encounterSetAutoCompleteWidget">

							<p:column style="border: none;">
								<h:graphicImage url="#{commonCtrl.encounterSetImagePath}#{item.techName}.png"
									style="float: right; width: 40px; height: 40px;" />
								<h:outputText value="#{item.name}" escape="false" />
								<br />
								<h:outputText rendered="#{not empty item.crstName}" value="#{msgs.set}: #{item.crstName}"
									styleClass="text-small" escape="false" />
								<br />
								<h:outputText rendered="#{not empty item.cycleName}"
									value="#{msgs.cycle}: #{item.cycleName}" styleClass="text-small" escape="false" />
							</p:column>
						</p:autoComplete>

						<h:outputText value="#{msgs.scenario}" style="font-weight: bold;" />
						<p:autoComplete id="scenarioAutoComplete" value="#{cardSearchCtrl.selectedScenarios}"
							completeMethod="#{cardSearchCtrl.completeScenario}" var="item" itemLabel="#{item.name}"
							itemValue="#{item}" converter="#{autoCompleteItemConverter}" maxResults="10" multiple="true"
							forceSelection="true" style="margin-bottom: 5px;" widgetVar="scenarioAutoCompleteWidget">

							<p:column style="border: none;">
								<h:graphicImage url="#{commonCtrl.encounterSetImagePath}#{item.techName}.png"
									style="float: right; width: 40px; height: 40px;" />
								<h:outputText value="#{item.name}" escape="false" />
								<br />
								<h:outputText rendered="#{not empty item.crstName}" value="#{msgs.set}: #{item.crstName}"
									styleClass="text-small" escape="false" />
								<br />
								<h:outputText rendered="#{not empty item.cycleName}"
									value="#{msgs.cycle}: #{item.cycleName}" styleClass="text-small" escape="false" />
							</p:column>
						</p:autoComplete>

						<h:outputText value="#{msgs.sorting}" style="font-weight: bold;" />
						<p:autoComplete id="sortItemsAutoComplete" value="#{cardSearchCtrl.selectedSortItems}"
							completeMethod="#{cardSearchCtrl.completeSortItem}" var="item"
							itemLabel="#{item.description}" itemValue="#{item}" converter="#{autoCompleteItemConverter}"
							maxResults="20" multiple="true" forceSelection="true" style="margin-bottom: 5px;">

							<p:column style="border: none;">
								<h:outputText value="#{item.description}" styleClass="text-small" escape="false" />
							</p:column>
						</p:autoComplete>

						<!-- <pe:tooltip for="x">
							
						</pe:tooltip> -->

						<h:panelGrid columns="2" styleClass="text-std">
							<pe:triStateCheckbox value="#{cardSearchCtrl.unique}" />
							<h:outputText value="#{msgs.uniqueCards} " />
						</h:panelGrid>

						<h:panelGrid columns="2" styleClass="text-std" rendered="#{localeCtrl.language != 'en'}">
							<pe:triStateCheckbox value="#{cardSearchCtrl.localized}" />
							<h:outputText value="#{msgs.translatedCards} " />
						</h:panelGrid>

						<h:panelGrid columns="2" styleClass="text-std"
							rendered="#{cardSearchCtrl.correctionsAvailable}">
							<pe:triStateCheckbox value="#{cardSearchCtrl.corrected}" />
							<h:outputText value="#{msgs.correctedCards} " />
						</h:panelGrid>

						<h:panelGrid columns="2" styleClass="text-std"
							rendered="#{cardSearchCtrl.correctionsAvailable}">
							<p:selectBooleanCheckbox value="#{cardSearchCtrl.showCorrections}">
								<p:ajax process="@this" update=":searchResults" />
							</p:selectBooleanCheckbox>
							<h:outputText value="#{msgs.showCorrections} " />
						</h:panelGrid>
					</div>

				</div>

				<h:panelGroup layout="block">
					<h:outputText value="#{msgs.keyboardShortcuts}" styleClass="text-small" />
				</h:panelGroup>

				<!-- <p:watermark for="searchInput" value="Title, trait or text" />
				<p:watermark for="cardSetAutoComplete" value="Set or cycle name " />
				<p:watermark for="encounterSetAutoComplete" value="Encounter set, set xxxxxxxx" /> -->
			</h:panelGroup>

		</h:form>

		<!-- <p:sticky target="searchBox" /> -->

		<!-- paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}" rowsPerPageTemplate="10,20,30" -->

		<h:panelGroup id="searchResults" layout="block" style="margin-top: 10px;">
			<h:outputText value="#{msgs.cardsFound}: #{cardSearchCtrl.cardItemsCount}"
				rendered="#{not empty cardSearchCtrl.cardItemsCount}" />
			<h:form>
				<p:dataGrid var="item" value="#{cardSearchCtrl.cardItems}" paginator="true" rows="20"
					columns="2" rendered="#{not empty cardSearchCtrl.cardItems}" widgetVar="dataGridWidget"
					binding="#{cardSearchCtrl.cardsDataGrid}">
					<ui:include src="card.xhtml">
						<ui:param name="_item" value="#{item}" />
					</ui:include>
				</p:dataGrid>
			</h:form>
		</h:panelGroup>

		<h:form prependId="false">
			<p:hotkey bind="f" handler="queryTextWidget.getJQ().focus();" />
			<p:hotkey bind="s" handler="cardSetAutoCompleteWidget.getJQ().find('input').focus();" />
			<p:hotkey bind="e" handler="encounterSetAutoCompleteWidget.getJQ().find('input').focus();" />
			<p:hotkey bind="left"
				handler="if (dataGridWidget) {dataGridWidget.getPaginator().prevLink.click();}" />
			<p:hotkey bind="right"
				handler="if (dataGridWidget) {dataGridWidget.getPaginator().nextLink.click();}" />
			<p:hotkey bind="ctrl+left"
				handler="if (dataGridWidget) {dataGridWidget.getPaginator().firstLink.click();}" />
			<p:hotkey bind="ctrl+right"
				handler="if (dataGridWidget) {dataGridWidget.getPaginator().endLink.click();}" />
		</h:form>

	</ui:define>

</ui:composition>